<template>
  <el-container>
    <el-aside width="200px">
      <div class="logo_box">
        <p>气象信息服务平台</p>
      </div>
      <div class="menu_list">
        <ul>
          <li @click="ss_data">
            <i class="ali_iconfont ali_iconshishishujubukedianji"></i> 实时监控
          </li>
          <li @click="query_pivot">
            <i class="ali_iconfont ali_iconshujuchaxunsvg"></i>数据查询
          </li>
          <li @click="data_visualization">
            <i class="ali_iconfont ali_iconbingtu"></i>
            图表分析
          </li>

          <li @click="monitoring">
            <i class="ali_iconfont ali_iconwangyuanj"></i>
            监控管理
          </li>
          <li @click="station_c">
            <i class="ali_iconfont ali_iconqizhi"></i>
            站点管理
          </li>

          <li @click="setting">
            <i class="ali_iconfont ali_iconicon_set_up"></i>
            系统管理
          </li>
        </ul>
      </div>
    </el-aside>
    <el-container>
      <el-header>
        <el-row type="flex" justify="space-between" align="middle">
          <el-col class="weather_col" span>
            <div class="weather_p">
              <span class="c_name">{{w_obj.city }}</span>
              <!-- <span class="c_img">{{w_obj.city }}</span> -->
              <img :src="w_obj.icon" alt>
              <span>{{w_obj.week}}</span>
              <span>{{w_obj.weather}}</span>
              <span>{{w_obj.templow}}° ~ {{w_obj.temphigh}}°</span>
              <span>
                <i class="el-icon-wind-power"></i>
                {{w_obj.winddirect}} {{w_obj.windpower}}
              </span>
              <p>
                <el-popover
                  placement="top-start"
                  :title="'今日空气质量指数'+aqi.aqi"
                  width="200"
                  trigger="hover"
                >
                  <!-- :content="weather_tip" -->
                  <div class="popover-content" v-html="weather_tip"></div>
                  <el-tag slot="reference" class="air_tag" effect="plain">
                    空气质量:
                    {{ aqi.quality}}
                  </el-tag>
                </el-popover>
              </p>

              <!-- <el-button slot="reference">hover 激活</el-button> -->
              <!-- 空气: {{aqi.aqi}} PM2.5{{ aqi.ipm2_5 || '无'}} PM10 {{aqi.ipm10 || '无'}} -->

              <el-tooltip
                v-show="!city_s_lock"
                class="item"
                effect="dark"
                content="切换城市"
                placement="top"
              >
                <i @click="set_city" class="el-icon-map-location set_city"></i>
              </el-tooltip>
              <div class="jlxzq" v-show="city_s_lock">
                <el-cascader
                  v-model="select_city"
                  :options="city_list"
                  :props="{ expandTrigger: 'hover' }"
                  @change="s_city_Change"
                ></el-cascader>
              </div>
            </div>
          </el-col>
          <!-- <el-col :span="6"> -->
          <!-- <el-input v-model="serch">
              <i slot="suffix" class="ali_iconfont ali_iconhtmal5icon25"></i>
          </el-input>-->
          <!-- </el-col> -->
          <el-col :span="6" class="User_operation">
            <!-- <i @click="warning" class="ali_iconfont ali_iconyoujian">
              <i class="msg_num">{{$store.state.war_station.length}}</i>
            </i>
            <i @click="message" class="ali_iconfont ali_iconbell">
              <i class="bell_num">9</i>
            </i>-->
            <span class="username">{{$store.state.user_info.data.username}}</span>
            <span class="Exit" @click="exit">注销</span>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    <!-- 弹出警报列表 -->
    <el-dialog title="报警子站列表" :visible.sync="dialogVisible" width="60%">
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :show-header="true"
      >
        <el-table-column prop="name" label="警报气象站" sortable width="180"></el-table-column>
        <el-table-column prop="battery" label="电量"></el-table-column>
        <el-table-column prop="voltage" label="电压"></el-table-column>
        <el-table-column prop="lat" label="纬度"></el-table-column>
        <el-table-column prop="lng" label="经度"></el-table-column>
        <el-table-column prop="flag" label="状态">
          <template slot-scope="info">
            <img src="../assets/img/line02.png" title="警告状态" alt="已警告">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </el-container>
</template>

<script>
import arr from "../assets/lib/city.js";
export default {
  created() {
    // this.$store.commit("a");
    // console.log(this.$store.state.war_station_l);
    this.get_weather("");
    this.city_list = arr.arr;
  },
  mounted() {
    // this.websocket_user();
  },
  destroyed() {
    // 销毁监听
    // this.socket.onclose = this.close;
  },
  data() {
    return {
      tableData: [],
      waring_length: this.$store.state.war_station_l,
      // 警报列表开关
      dialogVisible: false,
      // 搜索内容
      serch: "",
      // 用户信息
      user_info: this.$store.state.user_info,
      // http://192.168.1.201:8080/
      path:
        "ws://http://192.168.1.201:8080/" + this.$store.state.user_info.data.id,
      socket: "",
      w_obj: {},
      aqi: {},
      city_list: [],
      select_city_val: [],
      city_s_lock: false,
      weather_tip: ""
    };
  },
  computed: {
    com_w_obj() {
      return this.$store.state.weather_obj;
    }
  },
  watch: {
    async com_w_obj(val) {
      var loc = val.lat + "," + val.lng;

      let res = await this.$jsonp("https://api.jisuapi.com/weather/query", {
        appkey: "d16f0cacaee7d4ce",
        location: loc
      });

      this.w_obj = res.result;
      this.w_obj.icon = require(`../assets/img/天气图标/weathercn02/${
        this.w_obj.img
      }.png`);
      this.aqi = this.w_obj.aqi;
      this.weather_tip = `<p>PM2.5 ：${this.aqi.ipm2_5} μg/m3</p> <p>PM 10 ：${
        this.aqi.ipm10
      } μg/m3</p>`;
    }
  },
  methods: {
    // 点击图标
    set_city() {
      this.city_s_lock = true;
    },
    // 选择城市
    s_city_Change(a) {
      console.log(a);
      this.get_weather(a[1]);
      this.city_s_lock = false;
    },
    // 获取天气信息
    async get_weather(city) {
      var city_ = "邯郸";
      if (city) {
        city_ = city;
      }
      let res = await this.$jsonp("https://api.jisuapi.com/weather/query", {
        appkey: "d16f0cacaee7d4ce",
        city: city_
      });
      console.log(res);

      this.w_obj = res.result;
      this.w_obj.icon = require(`../assets/img/天气图标/weathercn02/${
        this.w_obj.img
      }.png`);
      this.aqi = this.w_obj.aqi;
      this.weather_tip = `<p>PM2.5 ：${this.aqi.ipm2_5} μg/m3</p> <p>PM 10 ：${
        this.aqi.ipm10
      } μg/m3</p>`;
      // <!-- 空气: {{aqi.aqi}} PM2.5{{ aqi.ipm2_5 || '无'}} PM10 {{aqi.ipm10 || '无'}} -->

      // this.w_obj.daily.forEach(item => {
      //   item.icon = require(`../assets/img/天气图标/weathercn02/${
      //     item.day.img
      //   }.png`);
      // });
      // console.log(this.w_obj);
    },
    message() {
      // console.log(JSON.stringify(obj));
      this.socket.send(JSON.stringify(obj));
    },
    // async websocket_user() {
    //   if (typeof WebSocket === "undefined") {
    //     alert("您的浏览器不支持socket");
    //   } else {
    //     // console.log(this.user_info);

    //     // console.log(typeof WebSocket);
    //     // 实例化socket
    //     this.socket = new WebSocket(this.path);
    //     // 监听socket连接
    //     this.socket.onopen = this.open;
    //     // 监听socket错误信息
    //     this.socket.onerror = this.error;
    //     // 监听socket消息
    //     this.socket.onmessage = this.getMessage;
    //   }
    // },

    // open: function() {
    //   console.log("socket连接成功");
    // },
    // error: function() {
    //   console.log("连接错误");
    // },
    // getMessage: function(msg) {
    //   console.log(msg.data);
    // },
    // send: function() {
    //   var params = 123;
    //   this.socket.send(params);
    // },
    // close: function() {
    //   console.log("socket已经关闭");
    // },

    async waring_length_f() {
      this.waring_length = this.tableData.length;
    },
    warning() {
      this.dialogVisible = true;
      this.tableData = this.$store.state.war_station;
      // console.log( this.$store.state.war_station);

      this.waring_length = this.tableData.length;
      console.log(this.tableData);
    },
    exit() {
      this.$confirm("此操作将退出本次登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "已退出登录"
          });
          this.$router.push("/login");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消退出"
          });
        });
    },
    ss_data() {
      this.$router.push("/ss_data");
    },
    query_pivot() {
      this.$router.push("/query_pivot");
    },
    data_visualization() {
      this.$router.push("/data_visualization");
    },
    monitoring() {
      this.$router.push("/monitoring");
    },
    station_c() {
      this.$router.push("/station_c");
    },
    setting() {
      this.$router.push("/setting");
    }
  }
};
</script>

<style lang="less" scoped>
.weather_col {
  width: 100%;
}
.weather_p {
  .air_tag {
    font-size: 12px;
    cursor: pointer;
  }
  .jlxzq {
    margin-left: 30px;
  }
  .set_city {
    margin-left: 30px;
    font-size: 20px;
    cursor: pointer;
  }
  color: rgb(31, 44, 52);

  display: flex;
  width: 100%;
  align-items: center;
  span {
    font-size: 18px;
    padding: 0px 5px;
  }
  .c_name {
    font-size: 25px;
    // margin-right: 20px;
  }
  img {
    padding: 0px 15px;
  }
  p {
    padding-left: 20px;
  }
}
// .weather_p:nth-child(1) {
//   font-size: 20px;
//   color: pink;
// }

.logo_box {
  color: #fff;
  font-size: 18px;
  padding: 26px;
  text-align: center;
  p {
    letter-spacing: 4px;
  }
}

.ali_iconyoujian,
.ali_iconbell {
  cursor: pointer;
}
.el-container {
  height: 100%;
}
// 头部样式
.el-header {
  background-color: rgba(249, 246, 246, 0.952);

  height: 80px !important;
  padding: 20px 24px 20px 24px;

  .el-input {
    line-height: 40px;
    i {
      color: #007ee5;
      font-size: 26px;
      font-weight: 700;
      padding-right: 10px;
      cursor: pointer;
    }
  }
  .User_operation {
    text-align: right;
    margin-right: 20px;
    .ali_iconfont {
      font-size: 26px;
      padding-right: 26px;
      .msg_num,
      .bell_num {
        width: 16px;
        height: 16px;
        border-radius: 50%;
        position: absolute;
        transform: translate(-80%);
        font-size: 6px;
        color: #fff;
        text-align: center;
      }
      .msg_num {
        background-color: red;
      }
      .bell_num {
        background-color: #007ee5;
      }
    }
    .username {
      font-size: 26px;
      color: #007ee5;
      padding-right: 20px;
    }
  }
}
// 左侧样式
.el-aside {
  background-color: #1f2c34;
  height: 100%;
  width: 283px !important;
  img {
    width: 100%;
  }
  ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    li {
      transition: all 0.5s;

      line-height: 46px;
      text-align: center;
      width: 100%;
      height: 46px;
      color: #e3e4e4;
      cursor: pointer;
      i {
        padding-right: 16px;
      }
      &:hover {
        background-color: #007ee5;
        border-left: 10px solid #35c5fa;
      }
    }
  }
}
// 主体样式
.el-main {
  // position: relative;
  // background-color: lightseagreen;
  background-color: rgba(249, 246, 246, 0.952);

  padding: 20px;
  overflow: hidden;

  height: 100%;
}
.Exit {
  cursor: pointer;
}
</style>